<!-- 活跃用户 -->
<template>
  <div class="double-pie-cmp" ref="doublepie">
    <div class="pie-title">{{title}}</div>
    <div class="charts-box">
      <chart
        :options="pie"
        auto-resize
      />
      <div class="text-box" :style="'color:' + textColor">
        <template v-if="total">
          {{total}}
        </template>
        <template v-else>0</template>
      </div>
    </div>
    <div class="tiptool-box"></div>
  </div>
</template>

<script>

import Echarts from "vue-echarts/components/ECharts";
import "echarts/lib/chart/pie";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/legend";
import 'zrender/lib/svg/svg';
let echarts1 = require("echarts/lib/echarts");
export default {
  name: "doublePie",
  props: {
    pieData: Object
  },
  data() {
    return {
      tipmsgContent: 'null',
      title: '',
      total: 0,
      textColor: "#333",
      pie: {
        series: [
            {
                type: "pie", 
                center: ["50%", "50%"], 
                radius: ["73%", "95%"], 
                clockWise: true, 
                startAngle: 90, 
                hoverAnimation: false, 
                avoidLabelOverlap: false,
                selectedOffset: 0,
                labelLine: {
                show: false
                },
                data:[
                    {
                        value: 1,
                        itemStyle: {
                            color: 'rgba(229,229,229,.38)'
                        },
                        emphasis: {
                            itemStyle: {
                                color: 'rgba(229,229,229,.38)'
                            }
                        }
                    }
                ]
            },
            {
                type: "pie", 
                center: ["50%", "50%"], 
                radius: ["68%", "100%"], 
                clockWise: true, 
                startAngle: 90,
                hoverAnimation: false, 
                avoidLabelOverlap: false,
                selectedOffset: 0,
                labelLine: {
                show: false
                },
                data:[
                    {
                        value: 1,
                        itemStyle: {
                            color: 'rgba(229,229,229,0)'
                        },
                        emphasis: {
                            itemStyle: {
                                color: 'rgba(229,229,229,0)'
                            }
                        }
                    },
                    {
                        value: 0,
                        itemStyle: {
                            color: 'rgba(229,229,229,0)'
                        },
                        emphasis: {
                            itemStyle: {
                                color: 'rgba(229,229,229,0)'
                            }
                        }
                    }
                ]
            },
            {
                type: "pie", 
                center: ["50%", "50%"], 
                radius: ["68%", "100%"], 
                clockWise: true, 
                startAngle: 90,
                hoverAnimation: false, 
                avoidLabelOverlap: false,
                selectedOffset: 0,
                labelLine: {
                show: false
                },
                data:[
                    {
                        value: 1,
                        itemStyle: {
                            color: 'rgba(229,229,229,0)'
                        },
                        emphasis: {
                            itemStyle: {
                                color: 'rgba(229,229,229,0)'
                            }
                        }
                    },
                    {
                        value: 0,
                        itemStyle: {
                            color: 'rgba(229,229,229,0)'
                        },
                        emphasis: {
                            itemStyle: {
                                color: 'rgba(229,229,229,0)'
                            }
                        }
                    }
                ]
            },
            {
                type: "pie", 
                center: ["50%", "50%"], 
                radius: ["68%", "100%"], 
                clockWise: true, 
                startAngle: 90,
                hoverAnimation: false, 
                avoidLabelOverlap: false,
                selectedOffset: 0,
                labelLine: {
                show: false
                },
                data:[
                    {
                        value: 1,
                        itemStyle: {
                            color: 'rgba(229,229,229,0)'
                        },
                        emphasis: {
                            itemStyle: {
                                color: 'rgba(229,229,229,0)'
                            }
                        }
                    },
                    {
                        value: 0,
                        itemStyle: {
                            color: 'rgba(229,229,229,0)'
                        },
                        emphasis: {
                            itemStyle: {
                                color: 'rgba(229,229,229,0)'
                            }
                        }
                    }
                ]
            }
        ]
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
        this.setPieData();
        var _this = this;
        $(this.$refs.doublepie).on("mouseenter", function(e){
            var $dom = $(this);
            var html = _this.tipmsgContent;
            var clientX = 0, clientY = 0, isMoving = false;
            clientX = e.clientX || event.pageX || e.screenX;
            clientY = e.clientY || event.pageY || e.screenY;
            $(".tiptool-box").html(html).css({"display": "block"});
            var boxHeight = $(".tiptool-box").outerHeight();
            $(".tiptool-box").css({"left": (clientX + 10)+"px", "top": (clientY - 10 - boxHeight)+"px", "opacity": "1"});
            $dom.off("mousemove").on("mousemove", function(e1){
                isMoving = true;
                clientX = e1.clientX || e1.pageX || e1.screenX;
                clientY = e1.clientY || e1.pageY || e1.screenY;
                boxHeight = $(".tiptool-box").outerHeight();
                $(".tiptool-box").css({"left": (clientX + 10)+"px", "top": (clientY - 10 - boxHeight)+"px"});
            });
            $dom.off("mouseleave").on("mouseleave", function(e2){
                $dom.off("mousemove").off("mouseleave");
                isMoving = false;
                $(".tiptool-box").html("").css({"display": "none", "opacity": "0"});
            });
        });
    })
  },
  components: {
    chart: Echarts
  },
  filters: {
    formatNumber(number){
      return Math.round(number)
    }
  },
  computed: {
  },
  watch:{
    pieData:{
      handler(newVal){
        this.setPieData()
      },
      deep: true
    }
  },
  methods: {
    setPieData(){
      let self = this;
      this.title = '';
      this.pie.series[0].data = [];
      this.pie.series[1].data = [];
      this.$nextTick(() => {
        // {
        //     "name": "xxxx",
        //     "total": 0,
        //     "textColor": "#FA4949"
        //     "data": [
        //         {"value": 0, "name": "xxxxx", "colors": {"start": "rgba(229,229,229,.38)", "end": "rgba(229,229,229,.38)"}},//notActivityData
        //         {"value": 0, "name": "xxxxx", "colors": {"start": "rgba(229,229,229,.38)", "end": "rgba(229,229,229,.38)"}},//currentData1
        //     ]
        // }
        this.title = this.pieData.name || '';
        this.total = this.pieData.total || 0;
        this.textColor = this.pieData.textColor || "#333";

        let notActivityData = [
            {
                value: 1,
                itemStyle: {
                    color: 'rgba(229,229,229,.35)'
                },
                emphasis: {
                    itemStyle: {
                        color: 'rgba(229,229,229,.35)'
                    }
                }
            }
        ];
        let currentData1 = [
            {
                value: 1,
                itemStyle: {
                    color: 'rgba(229,229,229,0)'
                },
                emphasis: {
                    itemStyle: {
                        color: 'rgba(229,229,229,0)'
                    }
                }
            },
            {
                value: 0,
                itemStyle: {
                    color: 'rgba(229,229,229,0)'
                },
                emphasis: {
                    itemStyle: {
                        color: 'rgba(229,229,229,0)'
                    }
                }
            }
        ];
        let currentData2 = [
            {
                value: 1,
                itemStyle: {
                    color: 'rgba(229,229,229,0)'
                },
                emphasis: {
                    itemStyle: {
                        color: 'rgba(229,229,229,0)'
                    }
                }
            },
            {
                value: 0,
                itemStyle: {
                    color: 'rgba(229,229,229,0)'
                },
                emphasis: {
                    itemStyle: {
                        color: 'rgba(229,229,229,0)'
                    }
                }
            }
        ];
        let currentData3 = [
            {
                value: 1,
                itemStyle: {
                    color: 'rgba(229,229,229,0)'
                },
                emphasis: {
                    itemStyle: {
                        color: 'rgba(229,229,229,0)'
                    }
                }
            },
            {
                value: 0,
                itemStyle: {
                    color: 'rgba(229,229,229,0)'
                },
                emphasis: {
                    itemStyle: {
                        color: 'rgba(229,229,229,0)'
                    }
                }
            }
        ];
        var tipMsg = '<p>'+this.title + '：' + this.total +'</p>';
        var n0 = '', v0 = 0, c0 = null, n1 = '', v1 = 0, c1 = null, n2 = '', v2 = 0, c2 = null, n3 = '', v3 = 0, c3 = null;
        var bgC0 = '', bgC1 = '', bgC2 = '', bgC3 = '';
        if(this.pieData.data.length){
            var _pieData0 = this.pieData.data[0];
            var _pieData1 = this.pieData.data[1] || null;
            var _pieData2 = this.pieData.data[2] || null;
            var _pieData3 = this.pieData.data[3] || null;
            if(_pieData0){
                n0 = _pieData0.name || '';
                v0 = _pieData0.value || 0;
                c0 = _pieData0.colors || null;
            }
            if(_pieData1){
                n1 = _pieData1.name || '';
                v1 = _pieData1.value || 0;
                c1 = _pieData1.colors || null;
            }
            if(_pieData2){
                n2 = _pieData2.name || '';
                v2 = _pieData2.value || 0;
                c2 = _pieData2.colors || null;
            }
            if(_pieData3){
                n3 = _pieData3.name || '';
                v3 = _pieData3.value || 0;
                c3 = _pieData3.colors || null;
            }
            
            if(c0){
                bgC0 = "background: -webkit-linear-gradient("+ c0.start + ", " + c0.end + ");" 
                    + "background: -o-linear-gradient("+ c0.start + ", " + c0.end + ");" 
                    + "background: -moz-linear-gradient("+ c0.start + ", " + c0.end + ");" 
                    + "background: linear-gradient("+ c0.start + ", " + c0.end + ");" 

                notActivityData[0].value = v0 + v1 + v2 + v3;
                notActivityData[0].itemStyle = {
                    color: new echarts1.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0, 
                                color: c0.start
                            }, 
                            {
                                offset: 1, 
                                color: c0.end
                            }
                    ], false)
                };
                notActivityData[0].emphasis.itemStyle = {
                    color: new echarts1.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0, 
                                color: c0.start
                            }, 
                            {
                                offset: 1, 
                                color: c0.end
                            }
                    ], false)
                };
            }
            if(v1 && c1){
                bgC1 = "background: -webkit-linear-gradient("+ c1.start + ", " + c1.end + ");" 
                    + "background: -o-linear-gradient("+ c1.start + ", " + c1.end + ");" 
                    + "background: -moz-linear-gradient("+ c1.start + ", " + c1.end + ");" 
                    + "background: linear-gradient("+ c1.start + ", " + c1.end + ");" 

                currentData1[0].value = v1;
                currentData1[0].itemStyle = {
                    color: new echarts1.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0, 
                                color: c1.start
                            }, 
                            {
                                offset: 1, 
                                color: c1.end
                            }
                    ], false)
                };
                currentData1[0].emphasis.itemStyle = {
                    color: new echarts1.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0, 
                                color: c1.start
                            }, 
                            {
                                offset: 1, 
                                color: c1.end
                            }
                    ], false)
                };
                currentData1[1].value = v0 + v2 + v3;
            }
            if(v2 && c2){
                bgC2 = "background: -webkit-linear-gradient("+ c2.start + ", " + c2.end + ");" 
                    + "background: -o-linear-gradient("+ c2.start + ", " + c2.end + ");" 
                    + "background: -moz-linear-gradient("+ c2.start + ", " + c2.end + ");" 
                    + "background: linear-gradient("+ c2.start + ", " + c2.end + ");" 

                currentData2[0].value = v1 + v2;
                currentData2[0].itemStyle = {
                    color: new echarts1.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0, 
                                color: c2.start
                            }, 
                            {
                                offset: 1, 
                                color: c2.end
                            }
                    ], false)
                };
                currentData2[0].emphasis.itemStyle = {
                    color: new echarts1.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0, 
                                color: c2.start
                            }, 
                            {
                                offset: 1, 
                                color: c2.end
                            }
                    ], false)
                };
                currentData2[1].value = v0 + v3;
            }
            if(v3 && c3){
                bgC3 = "background: -webkit-linear-gradient("+ c3.start + ", " + c3.end + ");" 
                    + "background: -o-linear-gradient("+ c3.start + ", " + c3.end + ");" 
                    + "background: -moz-linear-gradient("+ c3.start + ", " + c3.end + ");" 
                    + "background: linear-gradient("+ c3.start + ", " + c3.end + ");" 

                currentData3[0].value = v1 + v2 + v3;
                currentData3[0].itemStyle = {
                    color: new echarts1.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0, 
                                color: c3.start
                            }, 
                            {
                                offset: 1, 
                                color: c3.end
                            }
                    ], false)
                };
                currentData3[0].emphasis.itemStyle = {
                    color: new echarts1.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0, 
                                color: c3.start
                            }, 
                            {
                                offset: 1, 
                                color: c3.end
                            }
                    ], false)
                };
                currentData3[1].value = v0;
            }
            var _tipMsg = (n0) ? '<p><i class="color-tip" style="'+bgC0+'"></i>' + n0 + '：' + v0 +'</p>' : '';
            _tipMsg += (n1) ? '<p><i class="color-tip" style="'+bgC1+'"></i>' + n1 + '：' + v1 + '</p>' : '';
            _tipMsg += (n2) ? '<p><i class="color-tip" style="'+bgC2+'"></i>' + n2 + '：' + v2 + '</p>' : '';
            _tipMsg += (n3) ? '<p><i class="color-tip" style="'+bgC3+'"></i>' + n3 + '：' + v3 + '</p>' : '';
            if(!!_tipMsg){
                tipMsg = _tipMsg;
            }
        }
        this.tipmsgContent = tipMsg;
        this.pie.series[0].data = notActivityData;
        this.pie.series[1].data = currentData3;
        this.pie.series[2].data = currentData2;
        this.pie.series[3].data = currentData1;
      })
      
    }
  }
};
</script>

<style lang="scss">
.double-pie-cmp {
    position:relative;
    width:90px;
    .pie-title{
        position:relative;
        font-size:14px;
        color:#333;
        font-weight:bold;
        text-align:center;
        height:20px;
        line-height:20px;
        margin-bottom:10px;
    }
    .charts-box {
        position: relative;
        width: 90px;
        height: 90px;
        .echarts {
            width: 90px;
            height: 90px;
        }
        .text-box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #333;
            font-weight:bold;
            font-family:Helvetica;
            white-space: nowrap;
            font-size: 18px;
        }
    }
    .tiptool-box {
        position:fixed;
        top:0;
        left:0;
        display:none;
        max-width:520px;
        z-index:1000;
        background:#fff;
        line-height:22px;
        font-size:12px;
        color:#666;
        text-align: left;
        padding: 10px 15px;
        padding-left:22px;
        border-radius: 6px;
        transition: opacity .2s;
        -moz-transition: opacity .2s;
        -webkit-transition: opacity .2s;
        -o-transition: opacity .2s;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
        p{
            position:relative;
        }
        i.color-tip{
            position:absolute;
            component:'';
            display:block;
            width:6px;
            height:6px;
            border-radius:5px;
            left:-12px;
            top:8px;
        }
    }
}
  

</style>
